$chart-list-title-height: 90px;



.chart-list-panel {
    margin: 30px 15px;

    h3 {
        margin-bottom: 20px;
    }

    .chart {
        width: 100%;
        max-width: 350px;
        margin: 0 auto;
        margin-bottom: 30px;

        border-radius: 2px;
        background-color: $clr-lightest;
        -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
           -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);

        .chart-link {
            position: relative;
            display: block;

            .chart-area {
                width: 100%;
                height: 100%;
                padding: 8px;
            }

            .chart-title {
                color: $clr-primary;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;

                padding: 10px 10px 2px 10px;
                margin: 0;
                font-weight: normal;
                font-size: 16px;
            }
        }

        .chart-info {
            padding: 5px 0;

            font-weight: bold;

            .chart-icon {
                float: right;

                .chart-delete {
                    display: none;

                    transition: 1s;
                }
            }
        }

        &:hover .chart-info .chart-icon .chart-delete {
            display: block;

            text-decoration: none;
        }
    }
}
